<template>
    <div>
        <ContentHead title="项目列表" content="这里将展示你的个人项目，当然也包括协同项目" ref="contentHead"></ContentHead>
        <div style="background: #fff;width: 100%;padding: 16px 0">
            <div class="app-list">
                <div class="app-search">
                    <Input v-model="search" style="width: 400px" placeholder="search project name" @on-change="searchKey">
                        <Icon type="ios-search" slot="suffix" />
                    </Input>
                    <Button type="primary" @click="createApp">创建项目</Button>
                </div>
                <div>
                    <div v-if="appList.length === 0">
                        <div style="width: 100%; text-align: center; margin-top: 160px">没有项目</div>
                    </div>
                    <div v-for="item in appList" :key="item.appInfo.id" class="app-item">
                        <div>
                            <p style="font-weight: bold; font-size: 16px">
                                <a class="go-detail" href="javascript:void(0)" @click="goDetail(item)">{{item.gitLabProject? item.gitLabProject.pathWithNamespace: item.appInfo.appName}}</a>
                            </p>
                            <p v-if="item.appInfo.description !== ''">{{item.appInfo.description}}</p>
                        </div>
                        <div style="text-align: right">
                            <div class="app-type">
                                <i v-if="item.appInfo.appType === '0' || item.appInfo.appType === '1'" class="mdo-logo">M</i>
                                <Icon v-if="item.gitLabProject && item.gitLabProject.visibility === 'public'" type="md-globe" size="18"/>
                                <Icon v-if="item.gitLabProject && item.gitLabProject.visibility === 'private'" type="md-lock" size="18" />
                                <Icon v-if="item.gitLabProject && item.gitLabProject.visibility === 'internal'" type="md-map" size="18" />
                            </div>
                            <p v-if="item.gitLabProject"> {{item.gitLabProject.createdAt | luxon:format('DD')}}</p>
                            <p v-else> {{item.appInfo.createdAt}}</p>
                        </div>
                    </div>
                </div>
                <div style="width: 100%; text-align: center; margin-top: 16px" v-if="total > 20">
                    <Page :total="total" :current="page.pageNum" :page-size="page.pageSize" @on-change="pageChange"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                appList: [],
                search: '',
                total: 0,
                page: {
                    pageNum: 1,
                    pageSize: 20,
                    filters:[{
                        field: 'appName',
                        operator: 'LIKE',
                        value: ''
                    }],
                    orders: [{
                        field: 'createdAt',
                        orderType: 'DESC'
                    }]
                }
            }
        },
        created() {
            this.searchApp(this.page);
        },
        methods: {
            searchKey() {
                this.page.pageNum = 1;
                this.page.filters = [{
                    field: 'appName',
                    operator: 'LIKE',
                    value: this.search
                }];
                this.searchApp(this.page);
            },
            searchApp(page) {
                this.$axios.post('/mdo/api/v1/app/page', page).then(res => {
                    if (res.status === 200) {
                        this.appList = res.data.list;
                        this.total = res.data.total;
                        this.$refs['contentHead'].scrollUp();
                    }
                });
            },
            pageChange(pageNum){
                this.page.pageNum = pageNum;
                this.page.filters = [{
                   field: 'appName',
                   operator: 'LIKE',
                   value: this.search
                }];
                this.searchApp(this.page);
            },
            createApp() {
                this.$router.push('/create');
            },
            goDetail(app) {
                this.$router.push({name: 'info', params:{id: app.appInfo.id}});
            }
        }
    }
</script>

<style lang="less" scoped>
    .app-list{
        height: auto;
        width: 1024px;
        margin: 0 auto;
        background-color: #fff;
        min-height: 500px;

        .app-search{
            display: flex;
            justify-content: space-between;
        }

        .app-item{
            &:first-child{
                border-top: 1px solid @border-color-base;
                margin-top: 16px;
            }
            p {
                line-height: 22px;
                vertical-align: baseline;
            }

            .go-detail{
                color: @text-color;
                &:hover{
                    text-decoration: underline;
                }
            }

            .app-type{
                &>i{
                    margin-left: 8px;
                }
            }
            .mdo-logo{
                display: inline-block;
                width: 16px;
                height: 16px;
                font-size: 12px;
                vertical-align: middle;
                text-align: center;
                border-radius: 50%;
                border: 1px solid #515a6e;
                line-height: 16px;
                box-sizing: border-box;
            }
            height: 60px;
            display: flex;
            justify-content: space-between;
            padding: 8px;
            border-bottom: 1px solid #dcdee2;
            align-items: center;
        }
    }
</style>